<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">

    <style>
        .layui-table tr {
            height: 50px;
        }


        body {
            padding: 10px;
        }

        .content {
            background-color: #fff;
            padding: 10px;
        }

        .sousuo {
            display: inline-block;
            width: 200px;
        }

        .btn {
            margin-right: 10px;
        }

        .layui-icon {
            vertical-align: middle;
            font-size: 20px;
            margin-left: 5px;
        }

        .layui-btn {
            height: 30px;
            line-height: 30px;
        }

        .layui-form-switch {
            border: 1px solid #ec4141;
            background-color: #ec4141;
        }

        .layui-form-switch i {
            background-color: #fff;
        }

        .layui-form-onswitch {
            border-color: #5FB878;
            background-color: #5FB878;
        }

        .layui-form-switch em {
            color: #fff !important;
        }

        /* .input {
            width: 107px;
            border: 0px;
            background-color: transparent;
        } */

        /* .layui-form-label,
        .layui-form-mid,
        .layui-form-select,
        .layui-input-block,
        .layui-input-inline,
        .layui-textarea {
            width: 120px;
            display: inline-block;
        } */

        form {
            display: contents;
        }

        /* .layui-form-label {
            width: 80px;
        } */
    </style>
</head>

<body>


<!-- 主体部分 -->
<div class="content">
    <form class="layui-form">
        <blockquote class="layui-elem-quote quoteBox">
            <form class="layui-form" lay-filter="saixuan">
                <!-- 搜索框 -->
                <div class="layui-inline sousuo1">
                    <div class="layui-input-inline">
                        <input type="text" name="keyWords" class=" layui-input chaxun" id="sousuo"
                               placeholder="请输入要查找的用户名" />
                    </div>
                    <!-- 搜索按钮 -->
                    <button class="layui-btn searchId_btn" type="button" data-type="reload" id="chaxun"><i
                            class="layui-icon layui-icon-search"></i>搜索</button>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn " id="addTableDuty_btn" lay-event="add"><i
                            class="layui-icon layui-icon-addition"></i>添加用户</a>
                </div>

                <!-- 删除按钮 -->
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger layui-btn-normal" id="delete_Btn"><i
                            class="layui-icon layui-icon-delete"></i>批量删除</a>
                </div>
            </form>
        </blockquote>
        <table id="demo1" lay-filter="demo2"></table>
        <!--操作-->
        <script type="text/html" id="chakanBtn">
            <a class="layui-btn layui-btn-xs" lay-event="chakan">查看文件</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit" style="width:45px">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" style="width:45px">删除</a>
        </script>
        <script type="text/html" id="chakanBtn2">
            <a class="layui-btn layui-btn-xs" lay-event="xiazai" style="width:45px">下载</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" style="width:45px">删除</a>
        </script>
    </form>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../js/jquery-3.4.1.js"></script>
    <!-- <script type="text/javascript" src="../yonghu/wenjianguanli.js"></script> -->
    <script type="text/javascript" src="guanliyuan.js"></script>
    <script type="text/javascript">
        var url = "http://47.105.118.98:9013";
        var obj;
        layui.use(['layer', 'form', 'laydate', 'jquery'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                table = layui.table;
            form.verify({
                userName: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名为空或有有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }

                    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                    if (value === 'admin') {
                        alert('用户名不能为关键字');
                        return true;
                    }
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , password: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });
        })

    </script>

</body>

<!-- 点击添加按钮添加案例 -->
<form class="layui-form" style="display: none;" action="" id="addTableDuty" style="width: 100px;" lay-filter="edit">
    <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <!-- lay-verify用来自定义验证。 -->
                <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" value="123456" lay-verify="password" autocomplete="off"
                       placeholder="请输入密码" class="layui-input">
            </div>

        </div>

    </div>
    <div class="layui-form-mid layui-word-aux"
         style="margin-left: 180px;margin-bottom: 20px;margin-top: -30px;box-sizing: border-box;">
        默认密码为123456</div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-submit lay-filter="add">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 点击查看文件 -->
<div class="layui-form" style="display: none;" action="" style="margin-left:-60px;" id="chakanTable" lay-filter="chakan"
     style="width: 100%;" style="width: 100%;">
    <form class="layui-form">
        <blockquote class="layui-elem-quote quoteBox">
            <form class="layui-form" lay-filter="search">
                <!-- 搜索框 -->
                <div class="layui-inline sousuo2">
                    <div class="layui-input-inline ">
                        <input type="text" name="keyWord" id="sousuo123" class="layui-input" placeholder="请输入要查找的文件名" />
                    </div>
                    <!-- 搜索按钮 -->
                    <button class="layui-btn searchId_btn" type="button" data-type="reload" id="chaxun123"><i
                            class="layui-icon layui-icon-search"></i>搜索</button>
                </div>
                <!-- 下载按钮 -->
                <!-- <div class="layui-inline">
                    <a class="layui-btn " id="xiazai_Btn2"><i class="layui-icon layui-icon-download-circle"></i>批量下载</a>
                </div> -->
                <!-- 删除按钮 -->
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger layui-btn-normal" id="delete_Btn2"><i
                            class="layui-icon layui-icon-delete"></i>批量删除</a>
                </div>
            </form>
            <div style="width: 100%;">
                <table id="demo" lay-filter="demo"></table>
            </div>
</div>
<!-- 点击编辑 -->
<form class="layui-form" style="display: none;" action="" style="margin-left:-60px;" id="editTableDuty"
      lay-filter="edit">
    <div class="layui-form-item" style="margin-top: 20px;">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input editUserName" name="editUserName" lay-verify="userName"
                       id="editUserName">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input editUserName" lay-verify="password" name="editPassWord"
                       id="editPassWord">
            </div>
        </div>
    </div>
</form>